import { useState } from "react";
import { Outlet, useLocation } from "react-router-dom";
import { RightOutlined } from "@ant-design/icons";
import { Avatar } from "antd";
import LeftNav from "./commponents/LeftNav.tsx";
import WelcomeComponent from "./commponents/WelcomeComponent.tsx";
import { CSSTransition, SwitchTransition } from "react-transition-group";
import { useRef } from "react";
import elcontext from "./context.tsx";
import "@/style/faed.css";
import { useSelector } from "react-redux";
import SetUserInfo from "@/components/SetUserInfo";
import { UpdataUserInfo } from "@/api/xhr/user";
import { useDispatch } from "react-redux";
function Home() {
  const dispatch = useDispatch();
  const localhost = useLocation();
  const [isshowNav, setisshowNav] = useState(true);
  const elRef = useRef<HTMLDivElement>(null);
  const [open, setOpen] = useState(false);
  const [confirmLoading] = useState(false);
  const userinfo = useSelector((state: any) => state.user.userinfo);
  async function setUserInfo(data) {
    const res = await UpdataUserInfo({
      ...data,
      userid: userinfo.id
    });
    if (res.statusCode == 200) {
      setOpen(false);
      dispatch({ type: "user/setUser", payload: res.data });
    }
  }
  return (
    <>
      <div className={"h-full w-full flex"}>
        <SwitchTransition mode="out-in">
          <CSSTransition
            key={isshowNav ? "show" : "done"}
            timeout={500}
            classNames={"translate"}
          >
            {isshowNav ? (
              <div className="justify-start h-full w-[50px] p-2 relative">
                <Avatar
                  src={userinfo.userAvatar}
                  onClick={() => setOpen(true)}
                />
                <LeftNav setisshowNav={setisshowNav}></LeftNav>
              </div>
            ) : (
              <div className="justify-start h-full w-[14px] relative">
                <RightOutlined
                  className="absolute left-0 top-2/4 -translate-y-2/4 text-s"
                  onClick={() => setisshowNav(true)}
                />
              </div>
            )}
          </CSSTransition>
        </SwitchTransition>
        <div
          className="h-full w-full bg-white flex  transition-transform ease-linear flex-1"
          ref={elRef}
        >
          <elcontext.Provider value={elRef}>
            <Outlet></Outlet>
          </elcontext.Provider>
          {localhost.pathname == "/home" ? <WelcomeComponent /> : ""}
        </div>
      </div>
      <SetUserInfo
        showCancel={setOpen}
        open={open}
        initialValues={{
          email: userinfo.userMail,
          avatar: userinfo.userAvatar,
          username: userinfo.userName,
          sex: Number(userinfo.userSex),
          userSignature: userinfo.userSignature || ""
        }}
        callback={setUserInfo}
        confirmLoading={confirmLoading}
      ></SetUserInfo>
    </>
  );
}
export default Home;
